<template>
    <div class="body shareXinyongka" ref="imageWrapper" style="overflow: hidden;">
        <img class="imgshow" style="top: 0;" src="../img/xinyongka1_01.jpg" alt=""  v-if="ifshow">
        <img class="imgshow" style="bottom: 0" src="../img/xinyongka1_02.jpg" alt=""  v-if="ifshow">
        <div class="erweima" v-if="ifshow">
            <img :src="proid" alt="">
        </div>
        <!--<div class="btm" v-if="ifshow">-->
            <!--<div class="btmbox">-->
                <!--<div class="erweima">-->
                    <!--<img :src="proid" alt="">-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="newimg" v-if="!ifshow">
            <img :src="dataURL" alt="">
        </div>
    </div>
</template>
<script>
    import domtoimage from 'dom-to-image';
    import { Indicator } from 'mint-ui';
    import html2canvas from 'html2canvas'
    export default {
        name: "shareXinyongka",
        data(){
            return {
                ifshow:true,
                dataURL:"",
                proid:""
            }
        },
        mounted() {
            Indicator.open('海报生成中...');
            this.proid = '/apis/partner/imageCode/1';
            //执行图片转二维码
            this.erweimaonload();
        },
        methods:{
            erweimaonload(){
                let that = this;
                let image = new Image();
                image.crossOrigin = '';
                image.src = this.proid;
                image.onload = function () {
                    setTimeout(()=>{
                        that.toImage()
                    },500)
                }
            },
            toImage() {
                let width = document.body.clientWidth;
                let height = document.body.clientHeight;
                if(this.common.checksestom()=="iPhone"){
                    domtoimage.toSvg(this.$refs.imageWrapper)
                        .then(function (dataUrl) {
                            that.imgshow = true;
                            that.dataURL = dataUrl;
                            Indicator.close();
                        }).catch(function (error) {
                        Indicator.close();
                        Toast('请重新上传海报');
                    });
                }else{
                    html2canvas(this.$refs.imageWrapper, {
                        backgroundColor: "#477ef3",
                        width: width,
                        height: height
                    }).then((canvas) => {
                        let dataURL = canvas.toDataURL("image/png");
                        this.dataURL = dataURL;
                        this.ifshow = false;
                        Indicator.close();
                    });
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .shareXinyongka{
        position: relative;
        /*background: #6b68ff url("../img/haibaoxinyongka.jpg") top center no-repeat;*/
        /*background-size: 100% auto;*/
        background: #4b7df0;
        min-height: 13rem;
        .imgshow{
            width: 7.5rem;
            position: absolute;
            left: 0;
        }
        .erweima{
            position: absolute;
            width:100%;
            height: 2rem;
            bottom: 5.5rem;
            left: 0;
            img{
                width: 2rem;
                height: 2rem;
                display: block;
                margin: 0 auto;
            }
        }
        .btm{
            height: 0.9rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            background: #fff;
            /*border-top: 1px solid #ccc;*/


            .btmbox{
                width: 7.5rem;
                height: 0.9rem;
                margin: 0 auto;
                background: url("../img/sharebtm.jpg") center right no-repeat;
                background-size: 6.2rem auto;
                .erweima{
                    width: 1rem;
                    height: 1rem;
                    position: absolute;
                    left: 0.2rem;
                    top: -0.4rem;
                    img{
                        width: 1rem;
                        height: 1rem;
                    }
                }
            }
        }

        .newimg{
            width: 100%;
            height: 100%;
            img{
                width: 100%;
            }
        }
    }
</style>
